.wp-block-research-and-writing {
    @include grid(12);
    padding-bottom: 48px;

    // "Research & Writing" heading
    > h2:first-child {
        grid-column: 1 / 13;
        @include h1-semibold;
        text-align: center;
        margin: 48px 0;
    }

    // Category headings
    > h4 {
        grid-column: 1 / 13;
        text-align: center;
        // 36px margin-left to compensate for .deep-link button width
        margin: 40px 0 24px 36px;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        font-size: 12px;
        color: $blue-90;
    }

    // Article cards
    // Despite varying sizes, all cards in the section are styled this way
    .wp-block-owid-card {
        border: none;
        margin-bottom: 24px;

        &:hover {
            box-shadow: none;
        }

        figure {
            padding-bottom: 57%;
            width: 100%;
            max-height: 57%;
            display: block;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;

            img {
                object-fit: cover;
                height: 100%;
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        .text-wrapper {
            padding: 0;
            margin-top: 16px;
        }

        .description {
            line-height: 1.55;
        }

        a:hover .title {
            text-decoration: underline;
        }

        // byline
        p:last-child {
            @include body-3-medium-italic;
            margin-top: 8px;
            color: $blue-60;
        }
    }
}

.research-and-writing__top {
    grid-column: 1 / 13;
    @include grid(12);

    .wp-block-owid-card {
        .title {
            @include owid-link-90;
            @include h2-bold;
            margin-top: 16px;
            margin-bottom: 8px;
            text-decoration: none;
        }
        .description {
            @include body-1-regular;
        }
    }

    > .wp-block-owid-card {
        grid-column: 1 / 13;
    }

    img {
        border-color: #fff;
    }

    .research-and-writing__top-right {
        grid-column: 1 / 13;
        @include grid(2);
        grid-template-rows: auto 1fr;

        > .wp-block-owid-card,
        > .wp-block-group {
            grid-column: 1 / 3;
        }
    }

    .research-and-writing__shorts {
        background: $gray-10;
        padding: 24px;
        margin-bottom: 32px;

        h5 {
            @include overline-black-caps;
            color: $blue-60;
        }

        .wp-block-group {
            &:not(:last-child) {
                border-bottom: 1px solid $blue-10;
                p {
                    margin-bottom: 16px;
                }
            }

            h6 {
                // TODO: comprehensive typography PR
                line-height: 1.33;
                font-family: $serif-font-stack;
                font-size: 18px;
                font-style: unset;
                font-weight: bold;
                text-align: left;
                margin: 16px 0 8px 0;
                opacity: 1;

                a {
                    color: $blue-90;
                    text-decoration: none;
                }

                a:hover {
                    text-decoration: underline;
                }
            }

            p {
                color: $blue-60;
                font-size: 14px;
                font-style: italic;
                margin-bottom: 0;
            }
        }
    }
}

.wp-block-research-and-writing .research-and-writing__sub-category {
    grid-column: 1/13;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    overflow-x: auto;
    padding-bottom: 16px;
    margin: 0;

    .title {
        @include h3-bold;
        margin-top: 16px;
        margin-bottom: 8px;
    }
    img {
        border-color: #fff;
    }
}

@include md-up {
    .wp-block-research-and-writing {
        .research-and-writing__sub-category {
            padding-bottom: 0;
        }
    }

    .research-and-writing__top {
        > .wp-block-owid-card {
            grid-column: 1 / 13;
        }

        .research-and-writing__top-right {
            > .wp-block-owid-card {
                grid-column: 1 / 2;
            }

            > .wp-block-group {
                grid-column: 2 / 3;
            }
        }
    }

    .research-and-writing__sub-category {
        .title {
            font-size: 18px;
        }
    }
}

@include lg-up {
    .research-and-writing__top {
        > .wp-block-owid-card {
            grid-column: 1/7;
        }
        .wp-block-owid-card {
            margin-bottom: 0;
        }
        .research-and-writing__top-right {
            grid-column: 7/13;
        }
    }
}
